<!doctype html>
<html ng-app="app_test">
<head>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-5">
            <div ng-controller="textController">
    <textarea cols='50' rows='20' ng-model="message">

    </textarea>

                <span>{{ message.length | uppercase }}</span>
                <button ng-click="message=text()">button</button>
                <text></text>
                <p text>第三方士大夫似的</p>


                <div ng-if="data">
                    <ul>
                        <li ng-repeat="item in data">name: {{item.Name}}</li>
                    </ul>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover table-condensed">
                <tr ng-repeat="item in [1,2,3,4,5,6]">
                    <td  class="info" >First Name</td>
                    <td class="warning" >Last Name</td>
                    <td class="danger" >Username</td>
                </tr>
            </table>
        </div>
    </div>


    <div class="row">
        <div class="col-md-10">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">Username:</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="username" placeholder="Email">
                    </div>

                </div>
                <div class="form-group">
                    <textarea class="form-control" rows="3"></textarea>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md-10">
            <nav>
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>


</div>
</body>

<script src="app.js"></script>
<script src="service/textService.js"></script>
<script src="controller/textController.js"></script>
<script src="directive/textDirective.js"></script>
<script src="directive/dir.js"></script>

</html>